/**
 * 全局样式配置文件
 * 包含 uview-plus 主题配置和全局样式
 */

// ==================== Mixin 定义 ====================
// 添加必要的 mixin
@mixin flex($direction: row, $justify: flex-start, $align: stretch) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

// ==================== 全局变量 ====================
// 全局页内边距配置（统一改这里）
// 每个页面：上 40px，左右 0px
$global-page-padding-top: 0px;
$global-page-padding-x: 0px;

// 导航栏全局配置
// $navbar-bg-color: #F6F7F8; // 与页面背景色保持一致
$navbar-bg-color: #FFF;
$navbar-text-color: #333333; // 黑色字体
$navbar-height: 44px;
$navbar-padding: 0 15px;

// ==================== uview-plus主题色 ====================
$u-primary: #FF6E26;
$u-primary-dark: #e55a1a;
$u-primary-disabled: #ffb088;
$u-primary-light: #ff8a4d;

// 边框颜色
$u-border-color: #e4e7ed;
$u-border-color-light: #f0f0f0;

// 背景颜色
$u-bg-color: #f3f4f6;
$u-bg-color-light: #fafafa;

// 文字颜色
$u-text-color: #303133;
$u-text-color-light: #606266;
$u-text-color-lighter: #909399;

// 成功颜色
$u-success: #19be6b;
$u-success-dark: #18a566;
$u-success-disabled: #a0cfff;
$u-success-light: #71d5a1;

// 警告颜色
$u-warning: #ff9900;
$u-warning-dark: #f29100;
$u-warning-disabled: #fcbd71;
$u-warning-light: #fbbd61;

// 错误颜色
$u-error: #fa3534;
$u-error-dark: #dd6161;
$u-error-disabled: #fab6b6;
$u-error-light: #fab6b6;

// 信息颜色
$u-info: #909399;
$u-info-dark: #82848a;
$u-info-disabled: #c8c9cc;
$u-info-light: #c8c9cc;

// 其他常用变量
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-radius: 4px;
$u-font-size: 14px;
$u-line-height: 1.5;

// 确保所有 uview-plus 变量都有定义
$u-primary-disabled: #ffb088;
$u-warning-disabled: #fcbd71;
$u-success-disabled: #a0cfff;
$u-error-disabled: #fab6b6;
$u-info-disabled: #c8c9cc;

// 添加更多可能需要的变量
$u-main-color: #FF6E26;
$u-base-color: #606266;
$u-base-bg-color: #f3f4f6;
$u-base-border-color: #e4e7ed;
$u-base-text-color: #303133;
$u-base-text-color-light: #606266;
$u-base-text-color-lighter: #909399;

// ==================== 全局页面样式 ====================
page {
	width: 100%;
	height: 100%;
	background-color: #FFF;
	font-size: 28rpx;
	color: #333333;
}

/* 非 H5：用 padding 模拟页面外边距，兼容小程序/App，更稳妥 */
/* #ifndef H5 */
page {
    padding: $global-page-padding-top $global-page-padding-x 0 $global-page-padding-x;
	box-sizing: border-box;
}
/* #endif */

/* H5：确需"外边距"时，给 body 设置 margin */
/* #ifdef H5 */
html, body {
    margin: 0; // 使用内边距而非外边距
}
#app {
	box-sizing: border-box;
    padding: $global-page-padding-top $global-page-padding-x 0 $global-page-padding-x;
}
/* #endif */

// ==================== 全局样式类 ====================
// 可选：单页关闭全局页间距
.page-gap-0 {
	padding: 0 !important;
	margin: 0 !important;
}

.container {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
}

view,
scroll-view,
swiper,
button,
uni-button,
input,
textarea,
label,
text,
navigator,
cover-view,
cover-image,
picker,
picker-view,
radio,
radio-group,
image {
	box-sizing: border-box;
}

button, uni-button {
	line-height: 1.5;
	font-size: 28rpx;
	background-color: transparent;
	position: relative;
}

button::after, uni-button::after {
	border: none !important;
}

// 按钮无法点击的背景色
.btn-disable {
	background: #A2BDB9 !important;
}

.hover-opacity {
	opacity: 0.5;
	transition: opacity 0.2s ease-in-out;
}

/* input 样式 */
.placeholder-class {
	font-size: 26rpx;
	color: #C5C5C5;
}

/* 隐藏scroll-view的滚动条 */
::-webkit-scrollbar {
	display: none;
	width: 0 !important;  
	height: 0 !important;  
	-webkit-appearance: none;  
	background: transparent;  
}

/* 文字避头尾法则 */
.btw {
	table-layout: fixed;
	word-wrap: break-word;
	word-break: normal;
	text-align: justify;
	text-justify: inter-ideograph;
}

.fw-bold {
	font-weight: bold;
}

.bg-white {
	background: #fff;
}

.hidden {
	overflow: hidden;
}

.w100 {
	width: 100%;
}

.h100 {
	height: 100%;
}

.iphonex-m {
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
}

.iphonex-p {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

// ==================== 动态样式类 ====================
// 超出行数，自动显示行尾省略号，最多3行
@for $i from 1 through 3 {
	.line-#{$i} {
		@if $i == '1' {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
	}
}

@for $i from 0 through 50 {
	.fs-#{$i}{
		font-size: $i  + rpx;
		uni-view{
			font-size: $i + rpx;
		}

		view{
			font-size: $i  + rpx ;
		}
	}
}

// ==================== 字体大小配置 ====================
// 基础字体大小变量
$font-size-xs: 20rpx;    // 极小字体
$font-size-sm: 24rpx;    // 小字体
$font-size-base: 28rpx;  // 基础字体
$font-size-md: 32rpx;    // 中等字体
$font-size-lg: 36rpx;    // 大字体
$font-size-xl: 40rpx;    // 超大字体
$font-size-xxl: 48rpx;   // 极大字体
$font-size-title: 56rpx; // 标题字体

// 字体大小类名生成
@for $i from 12 through 80 {
	.fs-#{$i} {
		font-size: $i + rpx !important;
	}
}

// 常用字体大小类名
.fs-xs { font-size: $font-size-xs !important; }
.fs-sm { font-size: $font-size-sm !important; }
.fs-base { font-size: $font-size-base !important; }
.fs-md { font-size: $font-size-md !important; }
.fs-lg { font-size: $font-size-lg !important; }
.fs-xl { font-size: $font-size-xl !important; }
.fs-xxl { font-size: $font-size-xxl !important; }
.fs-title { font-size: $font-size-title !important; }

// 字体粗细配置
.fw-normal { font-weight: normal !important; }
.fw-bold { font-weight: bold !important; }
.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

// 行高配置
.lh-1 { line-height: 1 !important; }
.lh-1-2 { line-height: 1.2 !important; }
.lh-1-4 { line-height: 1.4 !important; }
.lh-1-5 { line-height: 1.5 !important; }
.lh-1-6 { line-height: 1.6 !important; }
.lh-1-8 { line-height: 1.8 !important; }
.lh-2 { line-height: 2 !important; }

// 文字对齐
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

// 文字装饰
.text-underline { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-none { text-decoration: none !important; }

// 文字换行
.text-wrap { word-wrap: break-word !important; }
.text-nowrap { white-space: nowrap !important; }
.text-break { word-break: break-all !important; }

// 文字省略号
.text-ellipsis {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

// 多行文字省略号
@for $i from 2 through 5 {
	.text-ellipsis-#{$i} {
		display: -webkit-box !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		word-break: break-all !important;
		-webkit-line-clamp: $i !important;
		-webkit-box-orient: vertical !important;
	}
}

// ==================== 内外边距配置 ====================
// 定义内外边距，历遍1-100
@for $i from 0 through 100 {
	// 得出：m-30
	.m-#{$i} {
		margin: $i + rpx;
	}

	// 得出：p-30
	.p-#{$i} {
		padding: $i + rpx;
	}

	@each $short, $long in l left, t top, r right, b bottom {
		// 缩写版，结果如： ml-30
		// 定义外边距
		.m#{$short}-#{$i} {
			margin-#{$long}: $i + rpx;
		}

		// 定义内边距
		.p#{$short}-#{$i} {
			padding-#{$long}: $i + rpx;
		}

		.#{$long}-#{$i} {
			#{$long}:  $i + rpx;
		}
	}
}